<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body rendered="#{moduleController.isRendered(moduleController.adminProduct)}">
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                <h1 class="title ui-widget-header ui-corner-all">QUẢN LÝ SẢN PHẨM</h1>
                <p:growl id="messages"/>
                <p:outputPanel deferred="true">
                    <h:form>
                        <p:commandButton id="btnInsert" action="#{productController.resetSelectedProduct()}" update=":insertForm" oncomplete="PF('insertDialog').show()" icon="icon-create" title="Thêm" value="Thêm"/>
                    </h:form>
                    <h:form id="formDataTable">
                        <p:dataTable style="text-align: center" id="productForm" var="product" value="#{productController.productList}" paginator="true" rows="10" 
                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                     filteredValue="#{productController.filterProducts}" emptyMessage="Không tìm thấy sản phẩm nào...">
                            <!-- Id -->
                            <p:column headerText="Id" sortBy="#{product.productId}" filterBy="#{product.productId}">
                                <h:outputText value="#{product.productId}"/>
                            </p:column>
                            <!-- Name -->
                            <p:column headerText="Tên" sortBy="#{product.name}" filterBy="#{product.name}">
                                <h:outputText value="#{product.name}"/>
                            </p:column>
                            <!-- Warranty -->
                            <p:column headerText="Thời gian bảo hành" sortBy="#{product.warranty}" filterBy="#{product.warranty}">
                                <h:outputText value="#{product.warranty}"/>
                            </p:column>
                            <!-- Price -->
                            <p:column headerText="Giá" sortBy="#{product.price}" filterBy="#{product.price}">
                                <h:outputText value="#{product.price}">
                                    <f:convertNumber integerOnly="true"/>
                                </h:outputText>
                            </p:column>
                            <!-- Is Selling? -->
                            <p:column headerText="Sản phẩm bán chạy?" sortBy="#{product.isSelling}" filterBy="#{product.isSelling}">
                                <p:selectBooleanCheckbox value="#{product.isSelling}" disabled="true"/>
                            </p:column>
                            <!-- Is New? -->
                            <p:column headerText="Sản phẩm mới?" sortBy="#{product.isNew}" filterBy="#{product.isNew}">
                                <p:selectBooleanCheckbox value="#{product.isNew}" disabled="true"/>
                            </p:column>
                            <!-- Category -->
                            <p:column headerText="Loại sản phẩm">
                                <h:outputText value="#{product.category.name}"/>
                            </p:column>
                            <!-- Manufacturer -->
                            <p:column headerText="Nhà sản xuất">
                                <h:outputText value="#{product.manufacturer.name}"/>
                            </p:column>
                            <!-- Actions -->
                            <p:column headerText="Chức năng">
                                <p:commandButton id="btnUpdate" update=":updateForm" oncomplete="PF('updateDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                    <f:setPropertyActionListener value="#{product}" target="#{productController.selectedProduct}"/>
                                </p:commandButton>
                                <p:commandButton id="btnDelete" update=":deleteProductForm" oncomplete="PF('confirmation').show()" icon="ui-icon-close" title="Xóa">
                                    <f:setPropertyActionListener value="#{product}" target="#{productController.selectedProduct}"/>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                    <!-- Insert -->
                    <h:form id="insertForm">
                        <p:dialog header="Thêm" widgetVar="insertDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">
                            <p:tabView id="tabView" widgetVar="insertTab">
                                <!-- Tab 1 -->
                                <p:tab id="tab1" title="Thông tin chung" disabled="#{productController.isFirstTabDisbaled}">
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <h:outputLabel for="name" value="Tên:"/>
                                        <p:inputText id="name" value="#{productController.selectedProduct.name}" style="width: 200px; margin: 5px"/>

                                        <h:outputLabel for="warranty" value="Thời gian bảo hành:"/>
                                        <p:inputText id="warranty" value="#{productController.selectedProduct.warranty}" style="margin: 5px"/>

                                        <h:outputLabel for="price" value="Giá:"/>
                                        <p:spinner id="price" value="#{productController.selectedProduct.price}" required="true" stepFactor="500" style="margin: 5px">
                                            <f:convertNumber integerOnly="true" type="number"/>
                                        </p:spinner>

                                        <h:outputLabel for="isSelling" value="Sản phẩm bán chạy?"/>
                                        <p:selectBooleanCheckbox id="isSelling" value="#{productController.selectedProduct.isSelling}" style="margin: 5px"/>

                                        <h:outputLabel for="isNew" value="Sản phẩm mới?"/>
                                        <p:selectBooleanCheckbox id="isNew" value="#{productController.selectedProduct.isNew}" style="margin: 5px"/>

                                        <h:outputLabel for="category" value="Loại sản phẩm"/>
                                        <p:selectOneMenu id="category" value="#{productController.selectedProduct.category.categoryId}" style="margin: 5px">
                                            <f:selectItem itemValue="#{null}" itemLabel="-- Chọn loại sản phẩm --"/>
                                            <f:selectItems value="#{productController.categoryList}" var="categoryList"
                                                           itemValue="#{categoryList.categoryId}" itemLabel="#{categoryList.name}"/>
                                        </p:selectOneMenu> 

                                        <h:outputLabel id="manufacturer" for="manufacturer" value="Nhà sản xuất"/>
                                        <p:selectOneMenu value="#{productController.selectedProduct.manufacturer.manufacturerId}" style="margin: 5px">
                                            <f:selectItem itemValue="#{null}" itemLabel="-- Chọn nhà sản xuất --"/>
                                            <f:selectItems value="#{productController.manufacturerList}" var="manufacturerList"
                                                           itemValue="#{manufacturerList.manufacturerId}" itemLabel="#{manufacturerList.name}"/>
                                        </p:selectOneMenu>
                                        <h:outputLabel for="specialInfo" value="Tính năng nổi bật"/>
                                        <p:editor id="specialInfo" value="#{productController.selectedProduct.specialInfo}" width="700" height="200" style="margin: 5px"/>
                                        <!-- Actions -->
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnInsertAccept" actionListener="#{productController.insert()}" onclick="insertTab.select(1)" update=":insertForm:tabView, :formDataTable, :messages" icon="ui-icon-contact" title="Create" value="Lưu"/>
                                            <p:commandButton id="btnInsertCancel" action="#{productController.resetSelectedProduct()}" oncomplete="insertDialog.hide();" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>
                                </p:tab>

                                <!-- Tab 2 -->
                                <p:tab id="tab2" title="Đặc tính kỹ thuật" disabled="#{productController.isSecondTabDisbaled}">
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <h:outputLabel for="generalInfo" value="Thông tin chung:"/>
                                        <p:scrollPanel style="width: 700px; height: 450px;" mode="native">
                                            <p:editor id="generalInfo" value="#{productController.selectedProduct.generalInfo}" width="700" height="400"/>
                                        </p:scrollPanel>
                                        <!-- Actions -->
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnUpdateAccept" actionListener="#{productController.update()}" onclick="insertTab.select(2)" update=":insertForm:tabView, :formDataTable, :messages" icon="ui-icon-contact" title="Update" value="Lưu"/>
                                            <p:commandButton id="btnUpdateCancel" action="#{productController.resetSelectedProduct()}" oncomplete="insertDialog.hide();" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>
                                </p:tab>
                                <p:tab id="tab3" title="Hình ảnh" disabled="#{productController.isThirdTabDisbaled}">
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <p:fileUpload fileUploadListener="#{productController.handleFileUpload}" mode="advanced" dragDropSupport="false" 
                                                      multiple="true" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnSaveAccept" actionListener="#{productController.insertImages()}" onclick="insertTab.select(0)" oncomplete="insertDialog.hide()" update=":messages" icon="ui-icon-contact" title="Save" value="Lưu"/>
                                            <p:commandButton id="btnSaveCancel" action="#{productController.resetSelectedProduct()}" oncomplete="insertDialog.hide()" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>
                                </p:tab>
                            </p:tabView>
                        </p:dialog>
                    </h:form>
                    <!-- Update product form -->
                    <h:form id="updateForm">
                        <p:dialog header="Sửa" widgetVar="updateDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">  
                            <p:tabView id="tabView">
                                <!-- Tab 1 -->
                                <p:tab id="tab1" title="Thông tin chung">
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <h:outputLabel for="name" value="Tên:"/>
                                        <p:inputText id="name" value="#{productController.selectedProduct.name}" style="width: 200px; margin: 5px"/>

                                        <h:outputLabel for="warranty" value="Thời gian bảo hành:"/>
                                        <p:inputText id="warranty" value="#{productController.selectedProduct.warranty}" style="margin: 5px"/>

                                        <h:outputLabel for="price" value="Giá:"/>
                                        <p:spinner id="price" value="#{productController.selectedProduct.price}" required="true" stepFactor="500" style="margin: 5px">
                                            <f:convertNumber integerOnly="true" type="number"/>
                                        </p:spinner>

                                        <h:outputLabel for="isSelling" value="Sản phẩm bán chạy?"/>
                                        <p:selectBooleanCheckbox id="isSelling" value="#{productController.selectedProduct.isSelling}" style="margin: 5px"/>

                                        <h:outputLabel for="isNew" value="Sản phẩm mới?"/>
                                        <p:selectBooleanCheckbox id="isNew" value="#{productController.selectedProduct.isNew}" style="margin: 5px"/>

                                        <h:outputLabel for="category" value="Loại sản phẩm"/>
                                        <p:selectOneMenu id="category" value="#{productController.selectedProduct.category.categoryId}" style="margin: 5px">
                                            <f:selectItem itemValue="#{null}" itemLabel="-- Chọn loại sản phẩm --"/>
                                            <f:selectItems value="#{productController.categoryList}" var="categoryList"
                                                           itemValue="#{categoryList.categoryId}" itemLabel="#{categoryList.name}"/>
                                        </p:selectOneMenu> 

                                        <h:outputLabel id="manufacturer" for="manufacturer" value="Nhà sản xuất"/>
                                        <p:selectOneMenu value="#{productController.selectedProduct.manufacturer.manufacturerId}" style="margin: 5px">
                                            <f:selectItem itemValue="#{null}" itemLabel="-- Chọn nhà sản xuất --"/>
                                            <f:selectItems value="#{productController.manufacturerList}" var="manufacturerList"
                                                           itemValue="#{manufacturerList.manufacturerId}" itemLabel="#{manufacturerList.name}"/>
                                        </p:selectOneMenu>
                                        <h:outputLabel for="specialInfo" value="Tính năng nổi bật"/>
                                        <p:editor id="specialInfo" value="#{productController.selectedProduct.specialInfo}" width="700" height="200" style="margin: 5px"/>
                                        <!-- Actions -->
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnInsertAccept" actionListener="#{productController.update()}" update=":formDataTable, :messages" icon="ui-icon-contact" title="Create" value="Lưu"/>
                                            <p:commandButton id="btnInsertCancel" action="#{productController.resetSelectedProduct()}" oncomplete="updateDialog.hide();" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>
                                </p:tab>
                                <!-- Tab 2 -->
                                <p:tab id="tab2" title="Đặc tính kỹ thuật">
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <h:outputLabel for="generalInfo" value="Thông tin chung:"/>
                                        <p:scrollPanel style="width: 700px; height: 450px;" mode="native">
                                            <p:editor id="generalInfo" value="#{productController.selectedProduct.generalInfo}" width="700" height="400"/>
                                        </p:scrollPanel>
                                        <!-- Actions -->
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnUpdateAccept" actionListener="#{productController.update()}" update=":formDataTable, :messages" icon="ui-icon-contact" title="Update" value="Lưu"/>
                                            <p:commandButton id="btnUpdateCancel" action="#{productController.resetSelectedProduct()}" oncomplete="updateDialog.hide();" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>
                                </p:tab>
                                <!-- Tab 3 -->
                                <p:tab id="tab3" title="Hình ảnh">
                                    <h1 style="font-weight: bold; text-align: center; margin: 10px 0; font-size: small">Danh sách hình ảnh</h1>
                                    <h:form id="formImageTable">
                                        <p:dataTable style="text-align: center" id="imageForm" var="image" value="#{productController.productImages}" paginator="true" rows="5" 
                                                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15"
                                                     emptyMessage="Không tìm thấy hình ảnh nào...">
                                            <!-- Id -->
                                            <p:column headerText="Id" style="width:3%; text-align: center" sortBy="#{image.slide360id}">
                                                <h:outputText value="#{image.slide360id}"/>
                                            </p:column>
                                            <!-- Name -->
                                            <p:column headerText="Đường dẫn" style="width:25%; text-align: center">
                                                <p:lightBox >
                                                    <h:outputLink value="#{image.imageLink}" title="#{image.imageInfo}">
                                                        <h:outputText value="#{image.imageLink}"/>
                                                    </h:outputLink>


                                                </p:lightBox>
                                            </p:column>
                                            <!-- Warranty -->
                                            <p:column headerText="Thông tin chi tiết" style="width:15%; text-align: center" sortBy="#{image.imageInfo}">
                                                <h:outputText value="#{image.imageInfo}"/>
                                            </p:column>
                                            <!-- Actions -->
                                            <p:column headerText="Chức năng" style="width:15%">
                                                <p:commandButton id="btnViewImage" update=":viewImageForm" oncomplete="PF('viewImageDialog').show()" icon="ui-icon ui-icon-wrench" title="Xem">
                                                    <f:setPropertyActionListener value="#{image}" target="#{productController.selectedImage}"/>
                                                </p:commandButton>
                                                <p:commandButton id="btnUpdateImage" update=":updateImageForm" oncomplete="PF('updateImageDialog').show()" icon="ui-icon ui-icon-wrench" title="Sửa">
                                                    <f:setPropertyActionListener value="#{image}" target="#{productController.selectedImage}"/>
                                                </p:commandButton>
                                                <p:commandButton id="btnDeleteImage" update=":deleteImageForm" oncomplete="PF('confirmation').show()" icon="ui-icon-close" title="Xóa">
                                                    <f:setPropertyActionListener value="#{image}" target="#{productController.selectedImage}"/>
                                                </p:commandButton>
                                            </p:column>
                                        </p:dataTable>
                                    </h:form>
                                    <h1 style="font-weight: bold; text-align: center; margin: 10px 0; font-size: small">Quản lý hình ảnh</h1>
                                    <h:panelGrid columns="2" cellpadding="10" width="800px">
                                        <p:fileUpload fileUploadListener="#{productController.handleFileUpload}" mode="advanced" dragDropSupport="false" 
                                                      multiple="true" sizeLimit="5000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
                                        <f:facet name="footer">
                                            <p:separator/>
                                            <p:commandButton id="btnSaveAccept" actionListener="#{productController.insertImages()}" update=":updateForm:tabView:formImageTable:imageForm, :messages" icon="ui-icon-contact" title="Save" value="Lưu"/>
                                            <p:commandButton id="btnSaveCancel" action="#{productController.resetSelectedProduct()}" oncomplete="updateDialog.hide()" icon="icon-create" title="Cancel" value="Hủy"/>
                                        </f:facet>
                                    </h:panelGrid>

                                </p:tab>
                            </p:tabView>
                        </p:dialog>  
                    </h:form>
                    <h:form id="viewImageForm">
                        <p:dialog header="Xem" widgetVar="viewImageDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">  
                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:10px;">
                                <p:graphicImage value="#{productController.selectedImage.imageLink}"/>
                            </h:panelGrid>
                        </p:dialog>  
                    </h:form>
                    <h:form id="updateImageForm">
                        <p:dialog header="Sửa" widgetVar="updateImageDialog" resizable="false" showEffect="fade" hideEffect="explode" modal="true">  
                            <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:10px;">
                                <h:outputLabel for="imageInfo"  value="Thông tin hình ảnh:" style="padding: 2px" />
                                <p:inputText id="imageInfo" value="#{productController.selectedImage.imageInfo}"/>

                                <f:facet name="footer">
                                    <p:separator/>
                                    <p:commandButton actionListener="#{productController.updateImage()}" id="btnUpdateAccept" update=":formDataTable, :messages" oncomplete="updateImageDialog.hide();" icon="icon-create" title="Update" value="Update"/>
                                    <p:commandButton id="btnUpdateCancel" action="#{productController.resetSelectedProduct()}" oncomplete="updateImageDialog.hide();" icon="icon-cancel" title="Cancel" value="Cancel"/>
                                </f:facet>
                            </h:panelGrid>
                        </p:dialog>  
                    </h:form>
                    <!-- Delete product form -->
                    <h:form id="deleteProductForm">
                        <p:confirmDialog closable="false" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation"
                                         message="Bạn có muốn xóa sản phẩm này?" header="Xóa" style="margin:5px auto;">
                            <h:panelGroup layout="block" style="text-align: right">
                                <p:commandButton value="Yes" action="#{productController.deleteProduct()}" oncomplete="confirmation.hide();" update=":formDataTable, :messages" />
                                <p:commandButton value="No" action="#{productController.resetSelectedProduct()}" oncomplete="confirmation.hide();" />
                            </h:panelGroup>
                        </p:confirmDialog>
                    </h:form>
                    <!-- Delete image form -->
                    <h:form id="deleteImageForm">
                        <p:confirmDialog closable="false" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation"
                                         message="Bạn có muốn xóa hình ảnh này?" header="Xóa" style="margin:5px auto;">
                            <h:panelGroup layout="block" style="text-align: right">
                                <p:commandButton value="Yes" action="#{productController.deleteImage()}" oncomplete="confirmation.hide();" update=":updateForm:tabView:formImageTable:imageForm, :messages" />
                                <p:commandButton value="No" action="#{productController.resetSelectedProduct()}" oncomplete="confirmation.hide();" />
                            </h:panelGroup>
                        </p:confirmDialog>
                    </h:form>
                </p:outputPanel>
            </ui:define>
        </ui:composition>
    </h:body>
</html>